<template>
  <div
    v-loading="loading"
    class="app-container"
    element-loading-text="加载中..."
    style="height: 100%"
  >
    <div class="app-container-inner" style="display: flex; flex-direction: column">
      <div class="header">
        <router-link to="/storage/newin">
          <HPlainButton>新增入库</HPlainButton>
        </router-link>
        <div class="search">
          <!-- 日期类型 -->
          <div class="search-item date-type">
            <el-select
              v-model="storeListSearch.dateType"
              clearable
              placeholder="日期类型"
              @change="storeListSearch.dateType == 1 ? '' : getListOutStoreRows()"
            >
              <el-option
                v-for="item in dateType"
                :key="item.value"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </div>

          <!-- 日期范围 -->
          <div v-if="storeListSearch.dateType == 1" class="search-item date-range">
            <el-date-picker
              v-model="storeListSearch.startTime"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
              style="height: 28px"
            />
            <span>~</span>
            <el-date-picker
              v-model="storeListSearch.endTime"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="height: 28px"
            />
          </div>

          <!-- 单据来源 -->
          <el-select
            v-model="storeListSearch.source"
            clearable
            placeholder="单据来源"
            @change="getListOutStoreRows"
            style="width: 120px"
          >
            <el-option
              v-for="item in source"
              :key="item.value"
              :label="item.title"
              :value="item.value"
            />
          </el-select>

          <!-- 入库单状态 -->
          <el-select
            v-model="storeListSearch.status"
            clearable
            placeholder="入库单状态"
            @change="getListOutStoreRows"
            style="width: 120px"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.title"
              :value="item.value"
            />
          </el-select>

          <!-- 单据类型 -->
          <el-select
            v-model="storeListSearch.typeId"
            :filter-method="changeOutType"
            clearable
            filterable
            placeholder="单据类型"
            remote-show-suffix
            @change="getListOutStoreRows"
            style="width: 120px"
          >
            <el-option
              v-for="item in outStoreType"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <!-- 入库单号/制单人 -->
          <el-input
            v-model="storeListSearch.search"
            clearable
            placeholder="入库单号/制单人"
            @keyup.enter="getListOutStoreRows"
            @clear="getListOutStoreRows"
            style="width: 120px"
          />

          <!-- 按钮组 -->
          <div class="search-item filter">
            <HButton type="primary" @click="getListOutStoreRows">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="clearVlaue">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </div>
      </div>
      <div class="table" style="flex: 1; position: relative">
        <el-table
          :data="tableDataList"
          border
          height="100%"
          resizable
          stripe
          style="position: absolute"
          top="8vh"
          @row-dblclick="goDetailPage"
        >
          <template #empty>
            <el-empty :image-size="140" description="暂无数据" />
          </template>
          <!-- 序号 -->
          <el-table-column fixed label="序号" show-overflow-tooltip type="index" width="50" />

          <!-- 入库单号 -->
          <el-table-column
            fixed
            label="入库单号"
            prop="inboundNo"
            show-overflow-tooltip
            min-width="130"
          >
            <template v-slot="i">
              <span class="change_style" @click="goDetailPage(i.row)">{{ i.row.inboundNo }}</span>
            </template>
          </el-table-column>

          <!-- 入库单状态 -->
          <el-table-column label="入库单状态" prop="status" show-overflow-tooltip width="86">
            <template #default="scope">
              <HStatus v-if="scope.row.status === 1" type="warning">待审核</HStatus>
              <HStatus v-if="scope.row.status === 2" type="warning">待入库</HStatus>
              <HStatus v-if="scope.row.status === 3" type="error">已驳回</HStatus>
              <HStatus v-if="scope.row.status === 4" type="success">已入库</HStatus>
              <HStatus v-if="scope.row.status === 5" type="info">已作废</HStatus>
            </template>
          </el-table-column>

          <!-- 仓库名称 -->
          <el-table-column label="仓库名称" prop="store" show-overflow-tooltip min-width="150" />

          <!-- 仓库类型 -->
          <el-table-column label="仓库类型" show-overflow-tooltip width="90">
            <template v-slot="i">
              {{ storeType[i.row.storeType].title }}
            </template>
          </el-table-column>

          <!-- 入库类型 -->
          <el-table-column label="入库类型" prop="type" show-overflow-tooltip width="120" />

          <!-- 单据来源 -->
          <el-table-column label="单据来源" show-overflow-tooltip width="100">
            <template #default="i">
              {{ source[i.row.source - 1].title }}
            </template>
          </el-table-column>

          <!-- 制单人 -->
          <el-table-column label="制单人" prop="createEmp" show-overflow-tooltip width="80" />

          <!-- 制单时间 -->
          <el-table-column label="制单时间" prop="createTime" show-overflow-tooltip width="128" />

          <!-- 最后更新时间 -->
          <el-table-column
            label="最后更新时间"
            prop="updateTime"
            show-overflow-tooltip
            width="128"
          />
        </el-table>
      </div>
      <div class="footer flex-justify-end">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="getListOutStoreRows"
          @current-change="getListOutStoreRows"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Pagination from '@/components/Pagination/index.vue'
  import { onMounted } from 'vue'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import userInbound from './userInbound'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.storage.inStorageList,
  })

  const {
    getListOutStoreRows,
    dateType,
    goDetailPage,
    getoutStoreTypePageSelect,
    source,
    status,
    outStoreType,
    storeType,
    changeOutType,
    clearVlaue,
    loading,
    total,
    pagination,
    tableDataList,
    storeListSearch,
  } = userInbound()
  onMounted(() => {
    getListOutStoreRows()
    getoutStoreTypePageSelect('')
  })
</script>

<style lang="scss" scoped>
  @import './index';
</style>
